import React, {useEffect} from "react";
import {Avatar, Form, Input, Modal} from "antd";

const LockModal = (props: any) => {

  const [form] = Form.useForm()
  const {userInfo, visible, closeHandler, onFinish} = props

  useEffect(() => {
    form.setFieldValue("password", undefined)
  }, [visible])

  const onOk = () => {
    form.submit()
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div>
      <Modal
        title="锁定屏幕"
        open={visible}
        onOk={onOk}
        onCancel={closeHandler}
        forceRender
        okText="确定"
        cancelText="取消"
      >
        <Form name="修改信息"
              form={form}
              labelCol={{span: 4}}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
        >
          <div>
            <Avatar style={{position: "relative", marginLeft: "45%"}} size={64} src={userInfo.avatar} />
            <div style={{position: "relative", marginLeft: "46%", fontSize: "large"}}>{userInfo.name}</div>
          </div>
          <Form.Item label="锁屏密码" name="password" rules={[{required: true, message: "请输入锁屏密码"}]}>
            <Input.Password/>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default LockModal
